<!DOCTYPE html>
<html>
<head>
    <title>Gravitational Wave Detector Schematic</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="schematicCanvas"></canvas>
    <script>
        const canvas = document.getElementById('schematicCanvas');
        const ctx = canvas.getContext('2d');

        // Set canvas size based on desired drawing scale
        const scale = 1.5;
        canvas.width = 500 * scale;
        canvas.height = 350 * scale;
        ctx.scale(scale, scale);

        // Clear canvas
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale);
        
        // Drawing properties
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '18px KaiTi';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Define coordinates ---
        const y_main = 150;
        const x_split_left = 200;
        const x_split_right = 350;
        const splitter_half_diag = 15;

        // --- Draw optical paths ---
        ctx.beginPath();
        // Path from Laser to right splitter
        ctx.moveTo(x_split_right, y_main);
        ctx.lineTo(450, y_main);
        // Path between splitters
        ctx.moveTo(x_split_right, y_main);
        ctx.lineTo(x_split_left, y_main);
        // Path to horizontal rod
        ctx.moveTo(x_split_left, y_main);
        ctx.lineTo(100, y_main);
        // Path to vertical rod
        ctx.moveTo(x_split_left, y_main);
        ctx.lineTo(x_split_left, 200);
        // Path to phototube
        ctx.moveTo(x_split_right, y_main);
        ctx.lineTo(x_split_right, 220);
        ctx.stroke();

        // --- Draw components ---

        // Laser (激光器)
        ctx.strokeRect(400, y_main - 15, 50, 30);
        ctx.fillText("激光器", 370, y_main - 10);

        // Phototube (光电管)
        ctx.strokeRect(x_split_right - 12.5, 220, 25, 40);
        ctx.textAlign = 'left';
        ctx.fillText("光电管", x_split_right + 18, 240);
        ctx.textAlign = 'center';

        // Horizontal Rod (棒)
        const h_rod_x = 100;
        const h_rod_y = y_main - 12.5;
        const h_rod_w = 70;
        const h_rod_h = 25;
        ctx.strokeRect(h_rod_x, h_rod_y, h_rod_w, h_rod_h);
        ctx.fillText("棒", h_rod_x + h_rod_w, y_main - 25);
        // Horizontal Fixture
        const h_fix_x = h_rod_x;
        const h_fix_y_top = h_rod_y - 5;
        const h_fix_y_bottom = h_rod_y + h_rod_h + 5;
        ctx.beginPath();
        ctx.moveTo(h_fix_x, h_fix_y_top);
        ctx.lineTo(h_fix_x, h_fix_y_bottom);
        for (let i = 0; i < 5; i++) {
            ctx.moveTo(h_fix_x, h_fix_y_top + i * 8);
            ctx.lineTo(h_fix_x - 12, h_fix_y_top + i * 8 + 8);
        }
        ctx.stroke();

        // Vertical Rod (棒)
        const v_rod_x = x_split_left - 12.5;
        const v_rod_y = 200;
        const v_rod_w = 25;
        const v_rod_h = 100;
        ctx.strokeRect(v_rod_x, v_rod_y, v_rod_w, v_rod_h);
        ctx.fillText("棒", v_rod_x - 15, v_rod_y + v_rod_h / 2);
        // Vertical Fixture
        const v_fix_y = v_rod_y + v_rod_h;
        const v_fix_x_left = v_rod_x - 5;
        const v_fix_x_right = v_rod_x + v_rod_w + 5;
        ctx.beginPath();
        ctx.moveTo(v_fix_x_left, v_fix_y);
        ctx.lineTo(v_fix_x_right, v_fix_y);
        for (let i = 0; i < 5; i++) {
            ctx.moveTo(v_fix_x_left + i * 8, v_fix_y);
            ctx.lineTo(v_fix_x_left + i * 8 - 8, v_fix_y + 12);
        }
        ctx.stroke();

        // --- Draw Splitters and Labels ---
        
        // Splitters (半透镜)
        ctx.beginPath();
        ctx.moveTo(x_split_left - splitter_half_diag, y_main + splitter_half_diag);
        ctx.lineTo(x_split_left + splitter_half_diag, y_main - splitter_half_diag);
        ctx.moveTo(x_split_right - splitter_half_diag, y_main + splitter_half_diag);
        ctx.lineTo(x_split_right + splitter_half_diag, y_main - splitter_half_diag);
        ctx.stroke();

        // Label "半透镜"
        ctx.font = '22px KaiTi';
        ctx.fillText("半透镜", (x_split_left + x_split_right) / 2, 80);

        // Curved arrows for the label
        ctx.lineWidth = 1;
        // Left arrow
        const l_arrow_start_x = x_split_left + 10;
        const l_arrow_start_y = 95;
        const l_arrow_end_x = x_split_left + 8;
        const l_arrow_end_y = y_main - splitter_half_diag - 3;
        const l_arrow_cp_x = l_arrow_start_x - 20;
        const l_arrow_cp_y = (l_arrow_start_y + l_arrow_end_y) / 2;
        ctx.beginPath();
        ctx.moveTo(l_arrow_start_x, l_arrow_start_y);
        ctx.quadraticCurveTo(l_arrow_cp_x, l_arrow_cp_y, l_arrow_end_x, l_arrow_end_y);
        // Arrowhead
        let angle_l = Math.atan2(l_arrow_end_y - l_arrow_cp_y, l_arrow_end_x - l_arrow_cp_x);
        ctx.lineTo(l_arrow_end_x - 6 * Math.cos(angle_l - Math.PI / 6), l_arrow_end_y - 6 * Math.sin(angle_l - Math.PI / 6));
        ctx.moveTo(l_arrow_end_x, l_arrow_end_y);
        ctx.lineTo(l_arrow_end_x - 6 * Math.cos(angle_l + Math.PI / 6), l_arrow_end_y - 6 * Math.sin(angle_l + Math.PI / 6));
        ctx.stroke();

        // Right arrow
        const r_arrow_start_x = x_split_right - 10;
        const r_arrow_start_y = 95;
        const r_arrow_end_x = x_split_right - 8;
        const r_arrow_end_y = y_main - splitter_half_diag - 3;
        const r_arrow_cp_x = r_arrow_start_x + 20;
        const r_arrow_cp_y = (r_arrow_start_y + r_arrow_end_y) / 2;
        ctx.beginPath();
        ctx.moveTo(r_arrow_start_x, r_arrow_start_y);
        ctx.quadraticCurveTo(r_arrow_cp_x, r_arrow_cp_y, r_arrow_end_x, r_arrow_end_y);
        // Arrowhead
        let angle_r = Math.atan2(r_arrow_end_y - r_arrow_cp_y, r_arrow_end_x - r_arrow_cp_x);
        ctx.lineTo(r_arrow_end_x - 6 * Math.cos(angle_r - Math.PI / 6), r_arrow_end_y - 6 * Math.sin(angle_r - Math.PI / 6));
        ctx.moveTo(r_arrow_end_x, r_arrow_end_y);
        ctx.lineTo(r_arrow_end_x - 6 * Math.cos(angle_r + Math.PI / 6), r_arrow_end_y - 6 * Math.sin(angle_r + Math.PI / 6));
        ctx.stroke();

    </script>
</body>
</html>